import React, { useRef } from 'react';
// import { useDrag, DragPreviewImage } from 'react-dnd';
import { v1 as uuid } from 'uuid';
import { getEmptyImage } from 'react-dnd-html5-backend';
import cl from 'classnames';
import './index.less';

import { useDragDrop, useDrag } from '@/components/editor/utils/dragDrop';

export default function DragItem({ data }) {
  const dragRef = useRef<HTMLDivElement | null>(null);

  const dragDrop = useDragDrop({
    dragRef,
    data: { ...data, sons: [] },
  });

  const [{ isDragging }, drag, connectDragPreview] = useDrag(
    dragDrop.useDrag(),
  );

  drag(dragRef);

  return (
    <div>
      {/* <DragPreviewImage connect={preview} src={''}></DragPreviewImage> */}
      <div
        ref={dragRef}
        className={cl('drag-item cursor-move', {
          isDragging: isDragging,
        })}
      >
        {data.type}
      </div>
    </div>
  );
}
